<template>
  <el-dialog class="base-dialog" :append-to-body="true" title="盘点单详情" align="center" :close-on-click-modal="false"
    :visible.sync="dialogViewVisible" @closed="closeDialog">
    <div v-loading.lock="loading" class="base-view">
      <el-descriptions title="基础信息" direction="vertical" :column="7" border>
        <el-descriptions-item label="盘点单编号">
          {{ formData.checkNum }}
        </el-descriptions-item>
        <el-descriptions-item label="盘点仓库">
          {{ formData.storageName }}
        </el-descriptions-item>
        <el-descriptions-item label="库区范围" :span="2">
          {{ formData.storageAreaRangeName }}
        </el-descriptions-item>
        <el-descriptions-item label="盘点负责人">
          {{ formData.operatorName }}
        </el-descriptions-item>
        <el-descriptions-item label="盘点开始时间">
          {{ formData.startTime }}
        </el-descriptions-item>
        <el-descriptions-item label="盘点结束时间">
          {{ formData.endTime }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ formData.remark }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="盘点结果" class="labelClassName">
        <template slot="extra">
          <el-checkbox v-model="checked" @change="filterResult">只显示盘点差异数据</el-checkbox>
          <el-button class="btn" type="primary" size="small" @click="exportExcel">导出盘点结果</el-button>
        </template>
      </el-descriptions>
      <el-table ref="tableResult"
        :data="filterFormResult.slice((pagination.pageIndex - 1) * pagination.pageSize, pagination.pageIndex * pagination.pageSize)"
        highlight-current-row>
        <el-table-column label="库区">
          <template slot-scope="scope">
            {{ scope.row.storageAreaName }}
          </template>
        </el-table-column>

        <el-table-column label="证书编号">
          <template slot-scope="scope">
            {{ scope.row.certificateNum }}
          </template>
        </el-table-column>
        <el-table-column label="物料编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="分类">
          <template slot-scope="scope">
            {{ scope.row.typeName }}
          </template>
        </el-table-column>

        <el-table-column label="型号规格">
          <template slot-scope="scope">
            {{ scope.row.size }}
          </template>
        </el-table-column>
        <el-table-column label="包装单位">
          <template slot-scope="scope">
            {{ scope.row.packingUnit }}
          </template>
        </el-table-column>
        <el-table-column label="存储条件">
          <template slot-scope="scope">
            {{ scope.row.storeCondition }}
          </template>
        </el-table-column>
        <el-table-column label="实际库存">
          <template slot-scope="scope">
            {{ scope.row.actualStock }}
          </template>
        </el-table-column>
        <el-table-column label="盘点库存">
          <template slot-scope="scope">
            {{ scope.row.checkStock }}
          </template>
        </el-table-column>
        <el-table-column label="差异库存">
          <template slot-scope="scope">
            <span :class="scope.row.differenceStock >= 0 ? 'red' : 'green'">{{
              scope.row.differenceStock > 0
              ? '+' + scope.row.differenceStock
              : scope.row.differenceStock
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination :total="pagination.total" :current-page="pagination.pageIndex" :page-count="pagination.total"
        @changePage="changePage" @sizeChange="sizeChange" />
      <el-descriptions title="盘点备注" class="labelClassName"> </el-descriptions>
      <el-input v-model="formData.checkRemark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入备注"
        readonly>
      </el-input>
    </div>
  </el-dialog>
</template>

<script>
import { get } from "../../../api/Material/MaterialInventoryCheck.js";
import { export_json_to_excel } from "@/vendor/Export2Excel"
export default {
  name: "InventoryView",
  components: {},
  props: {
    dialogViewVisible: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      tHeader: [
        "库区",
        "证书编号",
        "物料编号",
        "物料名称",
        "分类",
        "型号规格",
        "存储条件",
        "实际库存",
        "盘点库存",
        "差异库存",
      ],
      filterVal: [
        "storageAreaName",
        "certificateNum",
        "productNum",
        "productName",
        "typeName",
        "size",
        "storeCondition",
        "actualStock",
        "checkStock",
        "differenceStock"],
      loading: false,
      checked: true,
      formData: {},
      formResult: [],
      filterFormResult: [],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      }
    };
  },
  created() {

  },
  mounted() {
    this.init();
  },
  methods: {
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    exportExcel() {
      const data = this.formatJson(this.filterVal, this.formResult);
      this.export_json_to_excel({
        header: this.tHeader, // 表头
        data, // 数据
        filename: "盘点结果", // 导出文件名
        autoWidth: true, // 导出宽度自动
        bookType: "xlsx", // 导出后缀
      });
    },
    export_json_to_excel,
    changePage(val) {
      this.pagination.pageIndex = val;
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
    },
    filterResult() {
      this.pagination.pageIndex = 1;
      if (this.checked) {
        this.filterFormResult = this.formResult.filter((item) => {
          return item.differenceStock !== 0
        })
      } else {
        this.filterFormResult = this.formResult;
      }

      this.pagination.total = this.filterFormResult.length;
    },
    cancel() {
      this.$emit("update:dialogViewVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
    init() {
      get({ id: this.editId }).then(res => {
        this.formData = res.data;
        this.formResult = res.data.inventoryCheckDetailsList;
        this.filterResult()
      }).catch(res => { })
    },
  },
};
</script>
<style  lang="scss" >
.base-view {
  display: flex;
  flex-direction: column;

  .red {
    color: red;
  }

  .green {
    color: green;
  }

  .btn {
    margin-left: 10px;
  }

  .labelClassName {
    padding-top: 10px;

    .el-descriptions__header {
      justify-content: left !important;

      .el-descriptions__extra {
        padding-left: 10px !important;
      }
    }
  }
}
</style>
